<template>
  <div class="home-page">
    <div class="page-header">
      <div class="page-header-heading">工作台</div>
    </div>
    <div class="router-box">
      <div v-for="i in routerMenu" :key="i.id" class="router-list">
        <div
          :style="{
            'background-image': `url(${cover_images[(i.name).toLowerCase()]})`,
          }"
          class="router-item"
          @click="handleCommand(i)"
        >
          <span>
            <h4>{{ i.name }}</h4>
            <p>{{ i.remark }}</p>
          </span>
        </div>
      </div>
      <div v-for="(_, i) in routerMenu" :key="i" class="hide-item"/>
    </div>
  </div>
</template>

<script>
// import { getRouterList } from '@/api/system/menu'
// import { filterAsyncRouter } from '@/store/modules/permission'
// import { constantRouterMap } from '@/router/routers'
// import Router from 'vue-router'
import { mapGetters } from 'vuex'
import Cookies from 'js-cookie'
export default {
  name: 'Home',
  data() {
    return {
      user: 'add',
      cover_images: {
        ams: require('../assets/images/cover_images/ams.jpg'),
        apc: require('../assets/images/cover_images/apc.jpg'),
        dms: require('../assets/images/cover_images/dms.jpg'),
        eap: require('../assets/images/cover_images/eap.jpg'),
        mtms: require('../assets/images/cover_images/mtms.jpg'),
        pms: require('../assets/images/cover_images/pms.jpg'),
        rms: require('../assets/images/cover_images/rms.jpg'),
        tms: require('../assets/images/cover_images/tms.jpg'),
        oee: require('../assets/images/cover_images/oee.jpg'),
        tdm: require('../assets/images/cover_images/tda.jpg')
      }
    }
  },
  computed: {
    routerMenu: {
      get() {
        return this.$store.state.routerMenu.menuList.filter(c => c.isShow)
      }
    },
    ...mapGetters(['baseApi'])
  },
  watch: {
    $route: {
      handler() {
        if (/Dashboard/g.test(this.$route.name)) {
          this.$router.push({ name: Cookies.get('routeMenuHomePage') })
          // console.log(Cookies.get('routeMenuHomePage'))
        }
      }
    }
  },
  methods: {
    handleCommand(command) {
      if (command.link && command.url) {
        window.open(command.url)
      } else {
        this.$store.dispatch('ResetRoutes')
        this.$store.dispatch('tagsView/delAllViews').then(async() => {
          await Cookies.set('routerMenu', command.id)
          await Cookies.set('routeMenuHomePage', command.homePage)
          // 防止当前页面不刷新
          await this.$router.replace({ path: '/', query: { t: Date.now() }})
        })
      }
      this.$store.dispatch('setModuleMenuName', command.name)
      // // 都是异步的 重置
      // this.$store.dispatch('ResetRoutes')
      // this.$store.dispatch('tagsView/delAllViews').then(() => {
      //   this.$router.replace('/')
      // })
      // // addRoutes不会置空 新建一个全新的 Router，然后将新的 Router.matcher 赋给当前页面的管理 Router，以达到更新路由配置的目的
      // this.$router.matcher = new Router({
      //   mode: 'hash',
      //   // mode: 'history',
      //   scrollBehavior: () => ({ y: 0 }),
      //   routes: constantRouterMap
      // })
      // getRouterList({ id: command }).then(res => {
      //   const routes = res.data
      //   const asyncRouter = filterAsyncRouter(routes)
      //   asyncRouter.push({ path: '*', redirect: '/dashboard', hidden: true })
      //   this.$store.dispatch('GenerateRoutes', asyncRouter).then(() => {
      //     // 添加路由
      //     this.$router.addRoutes(asyncRouter)
      //   })
      //   Cookies.set('routerMenu', command)
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.home-page {
  min-height: calc(100vh - 90px);
  width: 100%;
  background: #f2f2f2;
  padding-bottom: 60px;
  .page-header {
    width: 100%;
    background-color: #fff;
    padding: 16px 24px;
    .page-header-heading {
      font-size: 20px;
      font-weight: 600;
    }
  }
  .router-box {
    min-width: 1200px;
    padding:0 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .router-list {
      width: 200px;
      // margin-top: 20px;
      margin: 20px 10px 20px 10px;
      .router-item {
        width:100%;
        height: 250px;
        box-shadow: 0 0 20px 0 rgb(155 155 155 / 22%);
        transition: 0.5s;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: 100% 150px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        span {
          display: block;
          width: 100%;
          transition: 0.3s;
          font-size: 18px;
          text-align: center;
        }
      }
      .router-item:hover {
        transform: scale(1.1);
        span {
          color: #409eff;
        }
      }
    }
    .hide-item{
      width: 200px;
      margin: 0 10px;
    }
  }
}
</style>
